<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.search{
				margin: 0 auto;
				border: 1px sloid red;
				transform: translateX(50%);
			}
				
			li{
				list-style: none;
				border:1px solid red;  
				width: 200px;
				height: 20px;
			}
			ul{
				display: none;
				
			}
				
			input{
				width: 200px;
				height: 20px;
				
				
				/* display: inline-block; */
			}
			input :hover{
				border: 1px solid #fffa40;
			}
		</style>
	</head>
	<body>
	<div class="search">
		<input type="text" value="search">
		<ul>
			<li>小米note11</li>
			<li>小米12pro</li>
			<li>小米pad6</li>
		</ul>
	</div>
	<script>
		const input = document.querySelector('input');
		const ul = document.querySelector('ul')
		input.addEventListener('focus',function(){
			ul.style.display='block';
			
			
		});
		input.addEventListener('blur',function(){
			ul.style.display='none';
			
			
		});
		
	</script>
	</body>
</html>